<template>
    <el-dialog v-model="visible" :title="title" @close="cancel" width="35%">

        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
            <el-form-item label="平台名称" prop="name">
                <el-input v-model="dataForm.name" disabled></el-input>
            </el-form-item>

            <el-form-item label="二维码地址" prop="qrCodes" class="custom-label-width">
                <el-upload v-model:file-list="dataForm.qrCodes" :action="constant.xuanfuurl" :headers="{ Authorization: cache.getToken() }" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false">
                    <el-button v-auth="'sys:attachment:save'" icon="Plus" type="primary">上传</el-button>
                </el-upload>
            </el-form-item>

            <!-- <p>{{  adxiuCodes }}</p> -->
            <el-image v-if="adxiuCodes" style="width: 100px; height: 100px;margin-left: 7rem" :src="adxiuCodes" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" />

            <!-- <el-form-item label="平台图标地址" prop="icons">
            <el-upload
           v-model:file-list="dataForm.icons"
					:action="constant.xuanfuurl"
					:headers="{ Authorization: cache.getToken() }"
					:before-upload="beforeUpload"
					:on-success="handleSuccess"
					:show-file-list="false"
				>
					<el-button v-auth="'sys:attachment:save'" icon="Plus" type="primary">上传</el-button>
				</el-upload>
        </el-form-item> -->

            <!-- <p>{{  adxiuicon }}</p> -->
            <el-image v-if="adxiuicon" style="width: 100px; height: 100px;margin-left: 7rem" :src="adxiuicon" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" />

            <el-form-item label="平台地址" prop="path">
                <el-input v-model="dataForm.path"></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="creator">
                <el-input v-model="dataForm.creator"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="dataForm.createTime"></el-input>
            </el-form-item>
            <el-form-item label="修改人" prop="updater">
                <el-input v-model="dataForm.updater"></el-input>
            </el-form-item>
            <el-form-item label="修改时间" prop="updateTime">
                <el-input v-model="dataForm.updateTime"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </template>
    </el-dialog>

</template>
  
  <script setup lang="ts">
import cache from '@/utils/cache'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useCrud } from '@/hooks'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import constant from '@/utils/constant'
import type { UploadFile } from 'element-plus'
import { addPColumn, addSColumn, editPColumn, editSColumn, sandedit, sanchuan } from '@/api/allApi'
import { v } from 'vxe-table'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { el } from 'element-plus/es/locale'
const emit = defineEmits(['resetList'])

const visible = ref(false)
const title = ref('编辑')
const dialogType = ref('addP')
const dataFormRef = ref()
const dataForm = reactive({
	id: '',
	name: '',
	icons: '',
	qrCodes: '',
	path: '',
	creator: '',
	createTime: '',
	updater: '',
	updateTime: ''
})

const id = ref('')
const names = ref('')
const icon = ref('')
const qrCodes = ref('')
const paths = ref('')

const iconSrc = ref('')

const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
	if (res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	}

	Object.assign(dataForm, res.data)
}

const beforeUpload: UploadProps['beforeUpload'] = file => {
	if (file.size / 1024 / 1024 / 100 > 1) {
		ElMessage.error('文件大小不能超过100M')
		return false
	}
	return true
}

const adxiuicon = ref('')

const adxiuCodes = ref('')

// 回显数据
const init = (type: string, row: any) => {
	console.log(row, 'ziyemian')

	// 检查row是否存在
	if (row && row.icon) {
		console.log(row, 'rrrrrrrrr')

		const xiuicon = row.icon
		// 真数据
		adxiuicon.value = xiuicon
		// 死数据
		// adxiuicon.value = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';
	} else {
		console.error('row is undefined or row.icon is missing')
	}

	if (row && row.qrCode) {
		const xiuqrCodes = row.qrCode
		// 真数据
		adxiuCodes.value = xiuqrCodes
		// 死数据
		// adxiuCodes.value = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';
	} else {
		console.error('row is undefined or row.qrCode is missing')
	}
	Object.assign(dataForm, row)
	// 显示对话框
	visible.value = true
}

// 新增数据  修改数据

const dataRules = reactive({})
const rowDate = reactive({})

let lastSubmitTime = 0 // 上一次提交的时间戳
const SUBMIT_COOLDOWN_TIME = 3 * 60 * 1000 // 3分钟的毫秒数

const submit = () => {
	const currentTime = Date.now() // 当前时间戳

	// // 检查是否在冷却时间内
	if (currentTime - lastSubmitTime < SUBMIT_COOLDOWN_TIME) {
		ElMessage.warning('请在3分钟后再试一次')
		return
	}

	id.value = dataForm.id
	names.value = dataForm.name
	paths.value = dataForm.path
	// qrCodes.value = dataForm.qrCodes.map((qrCode: { response: { data: { href: any } } }) => qrCode.response.data.href).join(', ');
	// icon.value = dataForm.icons.map((icons: { response: { data: { href: any } } }) => icons.response.data.href).join(', ');

	if (dataForm.qrCodes === '') {
		qrCodes.value = dataForm.qrCodes
	} else {
		qrCodes.value = dataForm.qrCodes.map((qrCode: { response: { data: { href: any } } }) => qrCode.response.data.href).join(', ')
	}

	if (dataForm.icons === '') {
		icon.value = dataForm.icons
	} else {
		icon.value = dataForm.icons.map((icons: { response: { data: { href: any } } }) => icons.response.data.href).join(', ')
	}

	console.log(qrCodes.value, 'q')
	console.log(icon.value, 'icon')

	if (dataForm.id === '') {
		sandedit({
			name: names.value,
			icon: icon.value,
			qrCode: qrCodes.value,
			path: paths.value,
			websiteId: Number(localStorage.getItem('WebsiteId'))
		})
			.then((res: any) => {
				lastSubmitTime = currentTime // 更新提交时间
				setTimeout(function () {
					location.reload()
				}, 1000) //
				ElMessage.success('添加操作成功')
				visible.value = false
			})
			.catch((err: any) => {
				ElMessage.error(err.message)
			})
	} else {
		console.log('id不为空,修改')
		sandedit({
			id: id.value,
			name: names.value,
			icon: icon.value,
			qrCode: qrCodes.value,
			path: paths.value,
			websiteId: Number(localStorage.getItem('WebsiteId'))
		})
			.then((res: any) => {
				lastSubmitTime = currentTime // 更新提交时间
				setTimeout(function () {
					location.reload()
				}, 1000)
				ElMessage.success('修改操作成功')
				visible.value = false
				emit('resetList')
			})
			.catch((err: any) => {
				ElMessage.error(err.message)
			})
	}
}

const cancel = () => {
	visible.value = false
	dataForm.id = ''
	dataForm.name = ''
	dataForm.icons = ''
	dataForm.qrCodes = ''
	dataForm.path = ''
	dataForm.creator = ''
	dataForm.createTime = ''
	dataForm.updater = ''
	dataForm.updateTime = ''

	adxiuicon.value = ''
	adxiuCodes.value = ''
	dataFormRef.value.resetFields()
}

defineExpose({
	init
})
</script>
  
  <style lang="scss" scoped>
.custom-label-width .el-form-item__label {
	width: 120px; /* 或者其他你需要的宽度 */
}
</style>
  